<template>
    <div>
        <el-page-header @back="goBack" content="歌曲管理" class="font">
        </el-page-header>
        <div class="container">
            <div>
                <label style="margin-right: 5px;">
                    搜索：
                </label>
                <el-input v-model="message" placeholder="请输入关键词" style="width: 15%"></el-input>
                <el-button type="primary" style="margin-left: 5px;" @click="handlePageSelect()">查询</el-button>
                <el-button type="primary" style="margin-left: 5px;" @click="deleteSongList()">删除歌曲</el-button>
                <el-button @click="drawer = true; getSongs()" type="primary" style="float: right;">
                    +添加歌曲到歌单
                </el-button>



                <template>
                    <el-table :data="recodes" stripe style="width: 100%;" ref="multipleTable" 
                        @selection-change="handleSelectionChangeSongList">

                        <el-table-column type="selection" width="55">
                        </el-table-column>

                        <el-table-column prop="songName" label="歌曲名称" align="center">
                        </el-table-column>

                    </el-table>
                </template>

                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page" :page-sizes="[20, 30, 40, 50]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" class="pageLists">
                </el-pagination>
            </div>
        </div>

        <el-drawer title="请选择你要添加的歌曲" :visible.sync="drawer" :with-header="true">
            <template>
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChangeSongs">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="歌曲列表">
                        <template slot-scope="scope">{{ scope.row.name }}</template>
                    </el-table-column>
                </el-table>
            </template>

            <el-button v-if="this.Songs.length != 0" type="primary" style="margin-left :80%; margin-top: 20px;" @click="AddSong()">添加</el-button>
        </el-drawer>
    </div>
</template>

<script>
import { PageQuery, DeleteSongList , addSongList } from '@/api/listSong'
import { AllSong } from '@/api/song'

export default {
    data() {
        return {
            drawer: false,
            message: '',
            total: 0,
            page: 1,
            pageSize: 20,
            recodes: [],
            tableData: [],
            SongList: [],
            Songs: []
        }
    },
    created() {
        this.handlePageSelect()
    },
    methods: {
        AddSong(){
            var songIds = []
           
            var id = this.$route.query.id
            
            for (var i = 0; i < this.Songs.length; i++) {
                songIds.push(this.Songs[i].songId)
            }
            addSongList(songIds.join(',') , id).then(res =>{
                if(res.data.code === 1){
                    this.$message.success('添加成功')
                    this.drawer = false;
                    this.handlePageSelect()
                }else{
                    this.$message.error(res.data.msg)
                }
            })
        },
        deleteSongList() {
            if (this.SongList.length === 0) {
                this.$message.error('请选择要删除的歌曲');
                return;
            }
            this.$confirm('这样将删除已经选中的歌曲, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var ids = []
                for (var i = 0; i < this.SongList.length; i++) {
                    ids.push(this.SongList[i].songId)
                }
                console.log(ids)
                DeleteSongList(ids.join(',')).then((res) => {
                    if (res.data.code === 1) {
                        this.handlePageSelect()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.handlePageSelect()
        },
        handleCurrentChange(page) {
            this.page = page
            this.handlePageSelect()
        },
        handleSelectionChangeSongs(val) {
            this.Songs = val;
        },
        handleSelectionChangeSongList(val) {
            this.SongList = val;
        },
        goBack() {
            this.$router.push({
                path: '/SongList',
            })
        },
        getSongs() {
            AllSong().then((res) => {
                if (res.data.code === 1) {
                    this.tableData = res.data.data.tableData;
                }
            }).catch((error) => {
                this.$message.error('请求出错了')
            })
        },
        handlePageSelect() {
            const params = { 'message': this.message, page: this.page, pageSize: this.pageSize, id: this.$route.query.id }
            PageQuery(params).then((res) => {
                if (res.data.code === 1) {
                    this.total = res.data.data.total
                    this.recodes = res.data.data.recodes;
                }
            }).catch((error) => {
                this.$message.error('请求出错了')
            })
        }


    }

}
</script>

<style scope>
.font {
    font-size: 15px;
    font-weight: bolder;
}

.pageLists {
    margin-left: 37%;
    margin-top: 3%;
}
</style>